<!DOCTYPE HTML>  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
<title>自定义右键菜单</title>  
<!-- 页面布局样式 -->  
<link rel="stylesheet" type="text/css" href="http://api.amap.com/Public/css/demo.Default.css" />   
<script language="javascript" src="http://webapi.amap.com/maps?v=1.2【&key=Your Key】"></script>  
<script language="javascript">  
var mapObj,toolBar,mouseTool,contextMenu;  
//初始化地图对象，加载地图  
function mapInit(){  
    mapObj = new AMap.Map("iCenter");  
    //地图中添加地图操作ToolBar插件、鼠标工具MouseTool插件  
    mapObj.plugin(["AMap.ToolBar","AMap.MouseTool"],function(){       
        toolBar = new AMap.ToolBar();   
        mapObj.addControl(toolBar);   
        mouseTool = new AMap.MouseTool(mapObj);       
    });   
      
    //自定义右键菜单内容  
    var menuContent = document.createElement("div");  
    menuContent.innerHTML = "<ul style='margin: 2px; padding: 2px; list-style-type: none; position: relative; background-color: rgb(255, 255, 255); border: 1px solid rgb(175, 175, 175); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; box-shadow: rgb(153, 153, 153) 2px 2px 8px; white-space: nowrap; cursor: pointer;'>"+  
    "<li style='text-indent: 0.5em; color:blue; font-size:13px;font-family:verdana;height: 20px; line-height: 20px; word-break: break-all; white-space: nowrap;'onclick='zoomMenu(0)'>缩小</li>"+  
    "<li style='text-indent: 0.5em; color:blue; font-size:13px;font-family:verdana;height: 20px; line-height: 20px; word-break: break-all; white-space: nowrap; border-bottom-color: rgb(204, 204, 204); border-bottom-style: solid; border-bottom-width: 1px;' onclick='zoomMenu(1)'>放大</li>"+  
    "<li style='text-indent: 0.5em; color:blue; font-size:13px;font-family:verdana; height: 20px; line-height: 20px; word-break: break-all; white-space: nowrap; border-bottom-color: rgb(204, 204, 204); border-bottom-style: solid; border-bottom-width: 1px;' onclick='distanceMeasureMenu()'>距离量测</li>"+  
    "<li style='text-indent: 0.5em; color:blue; font-size:13px;font-family:verdana;height: 20px; line-height: 20px; word-break: break-all; white-space: nowrap;' onclick='addMarkerMenu()'>添加标记</li></ul>"  
    //创建右键菜单  
    contextMenu = new AMap.ContextMenu({isCustom:true,content:menuContent});//通过content自定义右键菜单内容  
      
    //地图绑定鼠标右击事件——弹出右键菜单  
    AMap.event.addListener(mapObj,'rightclick',function(e){  
        contextMenu.open(mapObj,e.lnglat);  
        contextMenuPositon = e.lnglat; //右键菜单位置  
    });  
}  
//右键菜单缩放地图  
function zoomMenu(tag)  
{  
    if(tag==0){ mapObj.zoomOut();}  
    if(tag==1){ mapObj.zoomIn();}  
}  
      
//右键菜单距离量测  
function distanceMeasureMenu()  
{  
    mouseTool.rule();  
}  
  
//右键菜单添加Marker标记  
function addMarkerMenu()  
{  
    var marker = new AMap.Marker({  
        map:mapObj,  
        position:contextMenuPositon, //基点位置  
        icon:"http://webapi.amap.com/images/marker_sprite.png", //marker图标，直接传递地址url  
        offset:{x:-8,y:-34} //相对于基点的位置  
        });  
}  
</script>  
</head>  
<body onLoad="mapInit()">  
    <div id="iCenter"></div>      
    <div id="info" style="margin-top:10px;margin-left:10px;height:20px">地图上右击鼠标，弹出自定义样式的右键菜单</div>  
</body>  
</html>